import React, { Component } from 'react';
import Child from './Child';
// 引入antd组件
import {Button} from 'antd';
// 引入antd样式(这样是全部引入进来，需要优化，改成按需加载)
import 'antd/dist/antd.css'
import './Life.less';
class Life extends Component {
    // constructor(){
    //     super();
    //     this.state = {
    //         count: 0,
    //         name: '张盼盼'
    //     }
    // }
    // 也可以这样定义数据
    state = {
        count: 0,
        name: '张盼盼'
    }
    // 普通函数
    handleClick() {
        this.setState({
            count: this.state.count + 1
        })
    }
    handleClick2 = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        // let style1 = {padding: 30};
        // 切记所有的组件都是在根元素下进行的
        // style={style1}
        return (
            <div className="box">
                <p>React生命周期介绍</p>
                <Button onClick={this.handleClick.bind(this)}>antd的button组件</Button>
                <button onClick={this.handleClick.bind(this)}>点击方式1</button>
                <button onClick={this.handleClick2}>点击方式2</button>
                <p>{this.state.count}</p>
                <hr/>
                <p>下面是子组件，测试React的生命周期</p>
                <Child name={this.state.count}/>
            </div>
        );
    }
}

export default Life;